<template>
	<view class="pro-body">

		<view class="body">
			<view class="top-container no-bottom-padding">
				<uni-list :border="false">
					<uni-list-item :border="false" title="单据编号" :rightText="header.billNo" />
					<uni-list-item :border="false" title="称重申请单号" :rightText="header.weightNo" />
					<uni-list-item :border="false" title="组织" :rightText="header.orgName" />
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat :date="header.date" format="yyyy年MM月dd日" style="font-size: 20px; color: #000000;">
							</uni-dateformat>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<template v-if="detail && detail.length > 0">

				<view class="" v-for="(item,index) in detail" :key="index">
					<view class="panel">

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料编码：</view>
									<view class="panel_content_row_item_value">{{ item.materialNo }}</view>
								</view>
							</view>
						</view>

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">名称：</view>
									<view class="panel_content_row_item_value">{{ item.materialName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">规格：</view>
									<view class="panel_content_row_item_value">{{ item.specification }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<!-- 暂时没有材质，用单位代替 -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ item.basicUnitName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">入库数量：</view>
									<view class="panel_content_row_item_value">{{ item.qty }}</view>
								</view>
								<view class="panel_content_row_item" v-if="item.lot != 0">
									<view class="panel_content_row_item_title">批号：</view>
									<view class="panel_content_row_item_value">{{ item.lot }}</view>
								</view>

							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">仓库：</view>
									<view class="sechoice">
										<uni-data-select v-model="item.stockNo" :localdata="item.stockList" @change="change(item.stockNo,item)"
										 placeholder="请选择仓库"></uni-data-select>
									</view>
								</view>
								<view class="panel_content_row_item" v-if="item.isLocation">
									<view class="panel_content_row_item_title">仓位：</view>
									<view class="panel_content_row_item_value">
										<input v-model="item.locationNo " placeholder="请输入仓位" placeholder-class="input_placeholder" style="width: 100px;" />
									</view>
								</view>
							</view>
						</view>
						<view class="flex-list-btn">
							<view class="flex-list-btn-item" v-if="item.isLocation" @click="scanOrderDe(item)">
								扫描仓位
							</view>
						</view>

					</view>

				</view>

			</template>
			<view class="panel">
				<!--  底部按钮  -->

				<view class="footerPanelgx">

					<view class="footerPanelgx_body">

						<button @click="auditInspect()" class="footerBtngx save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>审核
						</button>

					</view>
				</view>
			</view>
		</view>
		<!--  底部按钮  -->
		<!-- 	<view class="footerPanel">
			<view class="footerPanel_body">
				<button @click="auditOtherIn()" class="footerBtn save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>审核
				</button>

			</view>
		</view> -->
	</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';

	import {
		getOtherInDetail,
		auditOtherIn,
		checkStock,
		getLocation

	} from '@/utils/api.js'

	export default {
		components: {

		},
		data() {
			return {
				billNo: '',
				loading: true,
				header: {},
				detail: [],
				materialList: [],
				butClick: false,
				selectRange: [],
				locationNo: '',
				locationName: ''
			}
		},
		methods: {
			//扫描仓位，扫描成功后修改下拉框中仓位信息
			scanOrderDe(item) {
				let _this = this
				qing.call('scanQRCode', {
					'needResult': 1, //是否需要处理，默认为0，扫描结果由云之家处理，1则直接返回扫描结果
					'isShowAlbum': false, //是否显示相册
					success: function(res) {
						if (!item.locationList.includes(res.data.qrcode_str)) {
							uni.showToast({
								title: '仓位错误请重试',
								icon: 'error'
							})
							return;
						}
						item.locationNo = res.data.qrcode_str
					},
					error: function(e) {
						console.log(e)
					}

				})
			},

			//修改仓库后重新校验仓库有没有启用仓位
			change(e, item) {
				for (let i = 0; i < item.stockList.length; i++) {
					if (item.stockList[i].value == e) {
						item.stockName = item.stockList[i].text
					}
				}
				this.checkStock(e, item)
			},
			//检查当前仓库是否启用仓位
			checkStock(stockNo, item) {
				checkStock({
					stockNo: stockNo
				}).then(res => {
					item.isLocation = res.data.data
					//如果仓库启用仓位的话查询仓位信息
					if (item.isLocation) {
						this.getLocation(stockNo, item)
					}
				})
			},
			//获取仓位信息
			getLocation(stockNo, item) {
				getLocation({
					stockNo: stockNo
				}).then(res => {
					item.locationList = res.data.data
				})
			},
			//审核其他入库单
			auditOtherIn() {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认审核',
					success(res) {
						if (res.confirm) {
							try {
								auditOtherIn({
									billNo: self.billNo,
									dataList: self.detail
								}).then(result => {
									if (result.data.status !== 200) {
										return
									}
									uni.showToast({
										title: '审核成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success() {
												uni.$emit('update', {
													msg: '页面刷新'
												});
											}
										})
									}, 1000)
								})
							} catch (e) {
								console.log(e)
							}
						}
					}
				})
			},


			// 获取详情数据
			initData() {
				getOtherInDetail({
					billNo: this.billNo
				}).then(res => {
					this.header = res.data.data.data
					this.detail = res.data.data.dataList

				})


			}
		},
		watch: {
			userInfo() {
				console.log(this.userInfo())
			}
		},
		onLoad(e) {
			this.billNo = e.billNo
			// 获取详情数据
			this.initData()


		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";

	/* 调整列表项左右文字大小 */
	::v-deep .uni-list-item__content-title {
		font-size: 20px !important;
		/* 左侧标题字体大小 */
		padding-left: 5px;
	}

	::v-deep .uni-list-item__extra-text {
		font-size: 20px !important;
		/* 右侧内容字体大小 */
		padding-right: 5px;
		color: #333;
	}

	/* 调整行间距 */
	::v-deep .uni-list-item__container {
		padding: 3px 0 !important;
		/* 减小上下内边距 */
		min-height: 10px !important;
		/* 减小最小高度 */
	}

	.panel {
		background: #fbffe2;
		border-radius: 16rpx;
		// box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}

	/* 调整标题样式 */
	.panel_content_row_item_title {
		font-size: 17px !important;
		/* 调大字体 */
		color: #000000 !important;
		/* 纯黑字体 */
		flex-shrink: 0;
		/* 防止压缩 */
	}

	/* 调整标题样式 */
	.panel_content_row_item_value {
		flex: 1;
		font-size: 17px !important;
		/* 数值特别放大 */
		color: #333 !important;
	}

	/* 调整输入框容器 */
	.panel_content_row_item_value_input {
		height: 40px;
		flex: 1;
		/* 占据剩余空间 */
		margin-left: 10px;
		/* 增加左右间距 */
	}

	// 底部按钮
	.footerPanelgx {
		height: 90px;
		width: 100%;

		.footerPanelgx_body {
			display: flex;
			justify-content: center;
			// gap: 20px;
			padding: 0 20px;
			justify-content: flex-start !important;
			/* 左对齐 */
			padding-left: 20px !important;

			/* 左侧留白 */
			.footerBtngx {
				height: 55px;
				margin: 0 5px;
				display: flex;
				line-height: 1;
				font-size: 16px;
				border-radius: 4px;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0 5px rgba(201, 201, 201, 0.5);
				color: #fff;

				&.save {
					background-color: $uni-color-success;
					width: 150px;
					flex-shrink: 0;
				}
			}

			.btn_icon {
				margin-right: 8px;
			}
		}
	}
</style>
